<template>
  <div style="text-align: left">
    <el-container>
      <el-header class="layout-header">
        <h3 style="margin-top: 15px;font-size: 25px" >后台管理系统

          <span style="float: right;font-size: 15px">
             <div style="position: absolute; right: 290px;top: 10px">
            <el-avatar :src="admin.imageData" size="20"></el-avatar>
          </div>
            {{admin.nickname}} &nbsp;({{admin.root}})
            &nbsp; &nbsp; &nbsp;
                    <a href="javascript:void(0)" @click="logout()">退出登录</a>
                </span>
        </h3>

      </el-header>
      <el-container class="layout-body">
        <el-aside class="layout-aside">
          <el-menu
              router="true"
              class="el-menu-vertical-demo"
              unique-opened="true"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
            <el-menu-item index="/admin/admin_earth">
              <template slot="title">
                <i style="font-size: 20px" class="fa fa-street-view"></i>
                &nbsp;
                <span>用户分布图</span>
              </template>
            </el-menu-item>
            <el-submenu index="/admin" :disabled="this.judgeAdmin">
              <template slot="title">
                <i style="font-size:20px" class="fa fa-user-circle"></i>
                &nbsp;
                <span>管理员管理</span>
              </template>
              <el-menu-item index="/admin/list" >
                <i style="font-size: 15px" class="fa fa-list"></i>
                &nbsp;
                <span>管理员列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/add">
                <i style="font-size: 15px" class="fa fa-sign-in"></i>
                &nbsp;
                <span>添加管理员</span>
              </el-menu-item>
              <el-menu-item index="/admin/update">
                <i style="font-size: 15px" class="fa fa-pencil-square-o"></i>
                &nbsp;
                <span>修改管理员信息</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="/user" :disabled="judgeUser">
              <template slot="title">
                <i style="font-size: 20px" class="fa fa-address-book-o"></i>
                &nbsp;
                <span>用户管理</span>
              </template>
              <el-menu-item index="/admin/user/list">
                <i style="font-size: 15px" class="fa fa-list"></i>
                &nbsp;
                <span>用户列表</span>
              </el-menu-item>

            </el-submenu>
            <el-submenu index="/blog" :disabled="judgeBlog">
              <template slot="title">
                <i style="font-size: 20px" class="fa fa-book"></i>
                &nbsp;
                <span>博客管理</span>
              </template>
              <el-menu-item index="/admin/blog/list" >
                <i style="font-size: 15px" class="fa fa-list"></i>
                &nbsp;
                <span>博客列表</span>
              </el-menu-item>
              <el-menu-item index="/admin/blog/check" >
                <i style="font-size: 15px" class="fa fa-check-square-o"></i>
                &nbsp;
                <span>审核列表</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {removeToken} from "@/utils/Token";
import {getToken} from "@/utils/Token";
import {admin} from "@/api/admin_api";

export default {
  name: "admin-main",
  data(){
    return{
        admin:{

        },
      judgeAdmin:true,
      judgeUser:true,
      judgeBlog:true
    };
  },
  created() {
    let id = getToken('userId')
      admin(id).then((res)=>{
          this.admin.nickname = res.data.data.nickname;
          this.admin.imageData = res.data.data.imageData;
          this.admin.root = res.data.data.root;
         switch (this.admin.root){
          case "高级管理员": this.judgeAdmin = false;
            this.judgeUser = false;
            this.judgeBlog = false;
            break;
          case "用户管理员": this.judgeUser = false;
            break;
          case "博客管理员": this.judgeBlog = false;
            break;
        }
      })
  },
  methods: {
    logout(){
      this.$router.push('/')
      removeToken(getToken('token'))
    }

  }
}
</script>

<style scoped>
* {
  margin: 0;
}
.layout-header {
  background: #2c3e50;
  color: #fff;
}
.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}
.layout-aside {
  background: dimgray;
  color: #fff;
}
</style>